import React, { useState, useEffect } from "react";
import "./SendMessage.css";
import { ImageUploader, Toast, Button } from "antd-mobile";
import axios from "axios"; // 引入axios用于发送请求获取解析后的位置信息，需提前安装axios

export default function SendMessage() {
  // 状态初始化
  const [dong_tai, Setdong_tai] = useState({
    title: "",
    name: "",
    img_url: "",
    context: "",
    touxiang: "",
    dianzan: "",
    time: "",
    status: false,
    cate: [],
  });

  //  新增状态用于存储选中的文件列表（图片或视频）
  const [fileList, setFileList] = useState([]);

  return (
    <div className="end">
      <div className="end_top">
        <h1 style={{ marginTop: "10px", fontSize: "20px" }}>发布动态</h1>
      </div>
      <div className="end-zhong">
        <div className="message">
          <textarea
            placeholder="请输入信息或上传图片..."
            value={dong_tai.context}
            onChange={(e) =>
              Setdong_tai({ ...dong_tai, context: e.target.value })
            }
          ></textarea>
        </div>
      </div>
      <div style={{ marginLeft: "300px", marginTop: "10px" }}>
        <Button
          color="primary"
          fill="solid"
          style={{ width: "70px", fontSize: "12px" }}
        >
          发布消息
        </Button>
      </div>
      <div className="end_upload">
        <ImageUploader
          multiple
          fileList={fileList}
          onChange={(files) => setFileList(files)}
          accept="image/*,video/*" // 设置可接受的文件类型，这里包含图片和视频
          maxCount={5} // 可设置最大上传数量，这里限制为5个文件，可按需调整
        />
      </div>
    </div>
  );
}
